<template>
  <SearchHeader @onSearch="onSubmit" @onReset="onReset">
    <n-form
        ref="formRef"
        :model="formValue"
        :inline="true"
        label-placement="left"
        @keydown.enter="onSubmit"
        :label-width="80">
      <n-grid
          x-gap="12"
          :cols="3">
        <n-gi>
          <n-form-item label="字典名称" path="typeName">
            <n-input v-model:value="formValue.typeName" placeholder="请输入字典名称" clearable />
          </n-form-item>
        </n-gi>
        <n-gi>
          <n-form-item label="状态" path="status">
            <n-select v-model:value="formValue.status" clearable :options="statusDict" />
          </n-form-item>
        </n-gi>
      </n-grid>
    </n-form>
  </SearchHeader>
</template>
<script setup>

import {reactive, ref} from "vue";
import SearchHeader from "@/components/public/PublicSearch.vue";


const getDefaultForm=()=>({
  typeName:''
})

const formValue = reactive(getDefaultForm());
const emit = defineEmits({
  search:null
})
defineExpose({
  searchParam:formValue
})
const onSubmit = () =>{
  emit('search')
}
const onReset = () =>{
  const keys = Object.keys(formValue);
  keys.forEach((key) =>{
    if (keys.includes(key)){
      formValue[key]=getDefaultForm()[key]
    }else {
      formValue[key]=null
    }
  })
  emit('search')
}
const statusDict = ref();
</script>
<style lang="scss" scoped>
.query-form {
  margin-top: 20px;
}
</style>